<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Imperial</title>
        <link rel="stylesheet" href="index.css" type="text/css">
    </head>
    <body>
        <div class="wrapper">
            <header>
                <div id="logo"><img src="imgs/logo.png"></div><!--
             --><div class="header-right">
                    <a href="#" id="bg01"></a>
                    <a href="#" id="bg02"></a>
                    <a href="#" id="bg03"></a>
                    <a href="#" id="bg04"></a>
                    <a href="#" id="bg05"></a>
                    <a href="#" id="bg06"></a>
                </div>
            </header>
            <nav>
                <a href="#" id="first">HOME</a><!--
             --><a href="#">ABOUT</a><!--
             --><a href="#">SERVICES</a><!--
             --><a href="#">BLOG</a><!--
             --><a href="#">PORTFOLIO</a><!--
             --><a href="#">ELEMENT</a><!--
             --><a href="#">CONTACT</a>
            </nav>
            <div class="slide">
                <img src="imgs/slide3.jpg">
            </div>
            <div class="bf-content">
                <div class="bf-content-left">
                    <h2>Hello!You will discover there are</h2>
                    <h2>world of themes where you've never been to</h2>
                </div>
                <div class="bf-content-right">
                    <p>Donec consectetur ut libero condimentum</p>
                    <h2>COME & JOIN OUR NEWSLETTER</h2>
                </div>
            </div>
            <div class="content">
                <div class="box">
                    <div class="box-img">
                        <img src="imgs/pic1.jpg">
                        <h5>UNLIMITED SKINS</h5>
                    </div>
                    <p>Nullam et lorem ut magna aliquet eleifend scelerisque eu justo. Maecenas sollicitudin, urna sit amet tristique... <a href="#" class="more">Read More</a></p>
                </div>
                <div class="box">
                    <div class="box-img">
                        <img src="imgs/pic2.jpg">
                        <h5>UNLIMITED SKINS</h5>
                    </div>
                    <p>Nullam et lorem ut magna aliquet eleifend scelerisque eu justo. Maecenas sollicitudin, urna sit amet tristique... <a href="#" class="more">Read More</a></p>
                </div>
                <div class="box">
                    <div class="box-img">
                        <img src="imgs/pic3.jpg">
                        <h5>UNLIMITED SKINS</h5>
                    </div>
                    <p>Nullam et lorem ut magna aliquet eleifend scelerisque eu justo. Maecenas sollicitudin, urna sit amet tristique... <a href="#" class="more">Read More</a></p>
                </div>
            </div>
            <div class="af-content">
                <div class="col" id="col01">
                    <h5>LATEST POST</h5>
                    <div class="first">
                        <img src="imgs/rp1.jpg">
                        <div>
                            <a href="#">Donec consectetur ut libero condimentum</a>
                            <span>June 19,2012,3.00pm</span>
                        </div>
                    </div>
                    <div class="first">
                        <img src="imgs/rp2.jpg">
                        <a href="#">Donec consectetur ut libero condimentum</a>
                        <span>June 19,2012,3.00pm</span>
                    </div>
                </div>
                <div class="col" id="col02">
                    <h5>CATEGORIES</h5>
                    <ul>
                        <li style="border-top: 1px solid rgb(230,230,230)"><a href="#">Photograph Design</a></li>
                        <li><a href="#">Wordpress</a></li>
                        <li><a href="#">jQuery Tabs and Toogle</a></li>
                        <li><a href="#">Site Template</a></li>
                        <li><a href="#">Joomla</a></li>
                        <li><a href="#">CSS3 & HTML5</a></li>
                        <li><a href="#">Images</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Uncategorized</a></li>
                    </ul>
                </div>
                <div class="col" id="col03">
                    <h5>BLOGROLL</h5>
                    <a href="#" class="blog blog01">Donec consectetur ut libero condimentum Donec consectetur ut libero condimentum</a>
                    <a href="#" class="blog blog02">Donec consectetur ut libero condimentum Donec consectetur ut libero condimentum</a>
                    <h5>ARCHIVE</h5>
                    <ul>
                        <li style="border-top: 1px solid rgb(230,230,230)"><a href="#">April 2012</a></li>
                        <li><a href="#">May 2012</a></li>
                        <li><a href="#">June 2012</a></li>
                    </ul>
                </div>
                <div class="col" id="col04">
                    <h5>GALLERY</h5>
                    <a href="#"><img src="imgs/g1.jpg" style="padding-top: 10px"></a>
                    <a href="#"><img src="imgs/g2.jpg" style="padding-right: 0"></a>
                    <a href="#"><img src="imgs/g3.jpg" style="padding-top: 10px"></a>
                    <a href="#"><img src="imgs/g4.jpg" style="padding-right: 0"></a>
                </div>
            </div>
            <footer>
                <div class="footer-left">
                    <a href="#">Home</a>
                    <a href="#">About</a>
                    <a href="#">Gallery</a>
                    <a href="#">Portfolio</a>
                    <a href="#">Blog</a>
                    <a href="#">Contact</a>
                </div>
                <span class="footer-right">
                    @Copyright 2013 company name all rights reserved.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </span>
            </footer>
        </div>
    </body>
</html>